<template>
  <div class="shell">
    <div
      class="box"
      v-for="(item, index) in items"
      :key="index"
      :class="{ active: currentIndex === index }"
      @mouseenter="handleMouseEnter(index)"
      @mouseleave="handleMouseLeave"
    >
      <!-- <img :src="item.image" alt="item.alt" /> -->
      <graphicCard
        :cardObj="graphicCardList[index]"
        class="graphic-card"
      ></graphicCard>
      <span :style="{ fontSize: props.labelFontSize }">{{
        item.label
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import image1 from '@/assets/test_image/1.jpg'
import image2 from '@/assets/test_image/2.jpg'
import image3 from '@/assets/test_image/3.jpg'
import image4 from '@/assets/test_image/4.jpg'
import image5 from '@/assets/test_image/5.jpg'
import graphicCard from '../card/graphic-card.vue'

const graphicCardList = ref([
  {
    textColor: 'green',
    image: image1,
    title: '全自动',
    desc: '牙科治疗方案的全自动化，可以大大减少人力成本，提高治疗效率。并且，全自动化方案可以根据患者的情况，自动调整治疗方案，提高治疗效果。'
  },
  {
    textColor: 'blue',
    image: image2,
    title: '高效',
    desc: '牙科治疗方案的高效化，可以大大减少人力成本，提高治疗效率。高效化方案可以根据患者的情况，自动调整治疗方案，提高治疗效果。'
  },
  {
    textColor: 'purple',
    image: image3,
    title: '智能',
    desc: '牙科治疗方案的智能化，可以大大减少人力成本，提高治疗效率。智能化方案可以根据患者的情况，自动调整治疗方案，提高治疗效果。'
  },
  {
    textColor: 'orange',
    image: image4,
    title: '快捷',
    desc: '牙科治疗方案的快捷化，可以大大减少人力成本，提高治疗效率。快捷化方案可以根据患者的情况，自动调整治疗方案，提高治疗效果。'
  },
  {
    textColor: 'pink',
    image: image5,
    title: 'AI',
    desc: '牙科治疗方案的AI化，可以大大减少人力成本，提高治疗效率。AI化方案可以根据患者的情况，自动调整治疗方案，提高治疗效果。'
  }
])

const items = ref([
  { image: image1, label: '全自动' },
  { image: image2, label: '高效' },
  { image: image3, label: '智能' },
  { image: image4, label: '快捷' },
  { image: image5, label: 'AI' }
])

const props = defineProps({
  labelFontSize: {
    type: String,
    default: '45px'
  }
})

const currentIndex = ref(0)
const totalItems = items.value.length

// 切换到下一个项目
const nextItem = () => {
  currentIndex.value = (currentIndex.value + 1) % totalItems
}

// 启动自动轮播
let interval

const startInterval = () => {
  interval = setInterval(nextItem, 3000) // 每3000毫秒切换一次
}

const clearIntervalTimer = () => {
  clearInterval(interval)
}

const handleMouseEnter = (index) => {
  clearIntervalTimer() // 清除计时器
  currentIndex.value = index // 更新当前索引为鼠标悬浮的项
}

const handleMouseLeave = () => {
  startInterval() // 恢复自动轮播
}

onMounted(() => {
  startInterval() // 启动自动轮播
})

onBeforeUnmount(() => {
  clearIntervalTimer() // 组件卸载时清理定时器
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

/* 最外层 */
.shell {
  width: 90%;
  height: 700px;
  display: flex;

  /* 内部盒子 */
  .box {
    flex: 1;
    overflow: hidden;
    transition:
      flex-basis 0.5s,
      background-color 0.5s;
    margin: 0 20px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    border: 10px solid #fff;
    background-color: #fff;

    /* 选择图文卡片 */
    > .graphic-card {
      width: 200%;
      height: 85%;
      object-fit: cover;
      transition:
        width 0.5s,
        height 0.5s;
    }

    /* 文字标签 */
    > span {
      font: 200 45px '优设标题黑';
      text-align: center;
      height: 15%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:hover {
      flex-basis: 40%; // 鼠标悬停时的效果
    }

    &.active {
      flex-basis: 40%; // 当前活动项的展开效果，与鼠标悬停时一致

      > .graphic-card {
        width: 100%; // 当前活动项的图片样式
        height: 100%;
      }
    }
  }
}
</style>
